import React,{Component} from "react"
import {axios} from "&/axios"
import "./index.scss"
import{
    Tabs,
    Button,
    Form,
    Input,
    Row,
    Col
}from "antd";

import {UserOutlined,LockOutlined,DesktopOutlined} from "@ant-design/icons"
const TabPane = Tabs.TabPane;
// import {UserOutlined,LockOutlined,DesktopOutlined} from "@ant-design/icons";
export default class Login extends Component{
    state = {
        active:2
    }
   
    render(){
        
        return(
            <div className="signin-main">
                <div className="signin-main-box back-in-left">
                <Tabs defaultActiveKey={this.state.active} >
                    <TabPane tab="密码登录" key="1" active="1">
                        <LoginPwd history={this.props.history}/>
                    </TabPane>
                    <TabPane tab="验证码登录" key="2" active="2">
                        <LoginByCode history={this.props.history}/>
                    </TabPane>
                </Tabs>
                </div>
            </div>
        )
    }
}
function logininfoset(res,that){
  if(res.data.type){
    const{
        token,
        mobile,
        password
    }=res.data.result;
    sessionStorage.token=token;
    sessionStorage.mobile=mobile; 
    localStorage.users=JSON.stringify({mobile,password});
    sessionStorage.users=JSON.stringify(res.data.result);
    that.props.history.push("/main")
}else{
    sessionStorage.token="";
    sessionStorage.mobile="";
    localStorage.users=JSON.stringify({});
    that.refs.loginForm? that.refs.loginForm.resetFields():that.loginForm.current.resetFields();
    
}
}
const layout = {
    labelCol: {
      span: 4,
    },
    wrapperCol: {
      span: 16,
    },
  };
const tailLayout = {
    wrapperCol: {
      offset:4,
      span: 16,
    },
};

const mReg = /^1(3|5|6|7|8|9)\d{9}$/;
const sReg = /^\d{4}$/
class LoginPwd extends Component{
    componentDidMount(){
        if(localStorage.users){
            var users=JSON.parse(localStorage.users)
            this.refs.loginForm.setFieldsValue({"mobile":users.mobile,"password":users.password})
        }
    }


    handleSubmit=(value)=>{
        this.refs.loginForm.validateFields()
        .then(values=>{
            axios.post("/api/login",values)
            .then(res=>{
               logininfoset(res,this)
            })
        }).catch(err=>{
            
        })
    }
    render(){
        return (
            <Form
            className="form-box"
            {...layout}
            name="basic"
            initialValues={{
              
            }}
            // ref={this.loginForm}
            ref="loginForm"
            onFinish={this.handleSubmit}
            // onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="手机号"
              name="mobile"
              rules={[
                {
                  required: true,
                  message: '请输入你的手机号码',
                },
                {
                  pattern: mReg,
                  message:"请输入正确的手机号",
                }
              ]}
            >

              <Input 
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入手机号"
              />
            </Form.Item>
      
            <Form.Item
              label="密 码"
              name="password"
              rules={[
                {
                  required: true,
                  message: '请输入你的密码',
                },
                {
                  max:12,
                  min:2,
                  message:"密码长度不对"
                }
              ]}
            >
              <Input.Password
                 prefix={<LockOutlined className="site-form-item-icon" />}
                 placeholder="请输入密码"
              />
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button style={{width:"100%"}} type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        )
    }
}
const num=60;
let timer=null;
class LoginByCode extends Component{
  loginForm=React.createRef();
  state={
    txt:"获取验证码",
    num:num,
    disabled:true,
    toggle:true
  }
  componentDidMount(){
    var values =  this.loginForm.current.getFieldsValue();
    this.setState({
      disabled:!mReg.test(values.mobile)
    })
  }
  handleCheckCode=()=>{
    var values=this.loginForm.current.getFieldValue();
  }
  handleCheckMobile=()=>{
    var values=this.loginForm.current.getFieldValue();
    if(this.state.toggle){
      this.setState({
        disabled:!mReg.test(values.mobile)
      })
    }
  }
  handleCountDown=()=>{
    timer=setInterval(()=>{
      if(this.state.num>0){
        this.state.num--;
        this.setState({
          num:this.state.num,
          txt:this.state.num+"S",
          disabled:true,
          toggle:false
        })
      }else{
        clearInterval(timer);
        this.setState({
          num,
          txt:"获取验证码",
          disabled:false
        })
      }
    },1000)
    this.getSmsCode()
  }
  getSmsCode=()=>{
    axios.post("/api/sendcode",{
      mobile:this.mobile.state.value
    }).then(res=>{

    })
  }
onFinish=(values)=>{
  axios.post("/api/checkcode",{
    ...values
  }).then(res=>{
    logininfoset(res,this)
  })
}

    render(){
      const{
        disabled,txt
      }=this.state;
        return(
            <Form
            className="form-box"
            {...layout}
            name="basic"
            initialValues={{
              mobile:'18674005716'
            }}
            ref={this.loginForm}
            onFinish={this.onFinish}
            // onFinishFailed={onFinishFailed}
          >
            <Form.Item
              label="手机号"
              name="mobile"
              rules={[
                {
                  required: true,
                  message: '请输入你的手机号码!',
                },
                {
                  pattern:mReg,
                  message:"请输入正确的手机号"
                }
              ]}
            >
              <Input 
              prefix={<UserOutlined className="site-form-item-icon" />}
              placeholder="请输入手机号"
              ref={el=>this.mobile=el}
              onChange={this.handleCheckMobile}
              />
            </Form.Item>
      
            <Form.Item
              label="验证码"
              name="sms"
              rules={[
                {
                  required: true,
                  message: '请输入你的验证码',
                },
                {
                  pattern:sReg,
                  message:"请输入四位验证码"
                }
              ]}
            >
             <Row>
                 <Col span={15}>
                    <Input
                        prefix={<LockOutlined className="site-form-item-icon" />}
                        placeholder="请输入验证码"
                        ref={el=>this.code=el}
                        onChange={this.handleCheckCode}

                    />
                 </Col>
                 <Col span={9}>
                    <Button  type="danger" disabled={disabled} onClick={this.handleCountDown} style={{width:"100%"}}  >
                        {txt}
                    </Button>
                 </Col>
             </Row>
             
              
            </Form.Item>
            <Form.Item {...tailLayout}>
              <Button style={{width:"100%"}} type="primary" htmlType="submit">
                登录
              </Button>
            </Form.Item>
          </Form>
        )
    }
}